<!DOCTYPE html>
<html lang="zh-CN">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Login</title>

    <!-- Bootstrap -->
    <link href="dist/bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">
    <link href="dist/bootstrap-3.3.7/css/bootstrap-theme.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/login.css"/>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body class="login">
    
    <div class="bg01"></div>
    <div class="container">
    	<div class="logo"></div>
    	<div class="main">
    	  <div class="left"></div>
    	  <div class="right">
    	    <div class="title">用户登录</div>
    	    <form action="">
    	      <div class="form-group">
    	        <input type="text" class="form-control inputName" id="inputName" placeholder="请输入用户名">
    	        <input type="password" class="form-control inputPassword" id="inputPassword" placeholder="请输入密码">
    	        <div>
    	          <input type="text" class="form-control inputNum" id="inputNum" placeholder="请输入验证码">
    	          <canvas class="verificationCode" id="canvas"></canvas>
    	        </div>
    	      </div>
    	    </form>
    	    <button class="btn btn-default" type="submit">登录</button>
    	  </div>
    	</div>
    	<div class="copyright">版权信息</div>
    </div>
    <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="loginModal">
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <div class="text"></div>
          <button type="submit">确定</button>
          <div></div>
        </div>
      </div>
    </div>
    
    

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="dist/jquery-2.2.4.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="dist/bootstrap-3.3.7/js/bootstrap.js"></script>
    <script type="text/javascript">
      var callback = '用户名密码错误';
      //登录按钮点击事件
      $('.container button').click(function(){
        $('.login .modal-content .text').html(callback);
        $('#loginModal').modal('show');
      });
      
      //弹出窗口确定按钮点击事件
      $('.login .modal-content button').click(function(){
        $('#loginModal').modal('hide');
      });
      
      //弹出窗口关闭按钮点击事件
      $('.login .modal-content div:last-child').click(function(){
        $('#loginModal').modal('hide');
      });
      
      //生成随机数
      function randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
      }
      //生成随机颜色RGB分量
      function randomColor(min, max) {
        var _r = randomNum(min, max);
        var _g = randomNum(min, max);
        var _b = randomNum(min, max);
        return "rgb(" + _r + "," + _g + "," + _b + ")";
      }
      //先阻止画布默认点击发生的行为再执行drawPic()方法
      document.getElementById("canvas").onclick = function(e) {
        e.preventDefault();
        drawPic();
      };

      function drawPic() {
        //获取到元素canvas
        var $canvas = document.getElementById("canvas");
        var _str = "0123456789"; //设置随机数库
        var _picTxt = ""; //随机数
        var _num = 4; //4个随机数字
        var _width = $canvas.width;
        var _height = $canvas.height;
        var ctx = $canvas.getContext("2d"); //获取 context 对象
        ctx.textBaseline = "bottom"; //文字上下对齐方式--底部对齐
        ctx.fillStyle = randomColor(180, 240); //填充画布颜色
        ctx.fillRect(0, 0, _width, _height); //填充矩形--画画
        for(var i = 0; i < _num; i++) {
          var x = (_width - 10) / _num * i + 10;
          var y = randomNum(_height / 2, _height);
          var deg = randomNum(-45, 45);
          var txt = _str[randomNum(0, _str.length)];
          _picTxt += txt; //获取一个随机数
          ctx.fillStyle = randomColor(10, 100); //填充随机颜色
          ctx.font = randomNum(80, 100) + "px SimHei"; //设置随机数大小，字体为SimHei
          ctx.translate(x, y); //将当前xy坐标作为原始坐标
          ctx.rotate(deg * Math.PI / 180); //旋转随机角度
          ctx.fillText(txt, 0, 0); //绘制填色的文本
          ctx.rotate(-deg * Math.PI / 180);
          ctx.translate(-x, -y);
        }
        for(var i = 0; i < _num; i++) {
          //定义笔触颜色
          ctx.strokeStyle = randomColor(90, 180);
          ctx.beginPath();
          //随机划线--4条路径
          ctx.moveTo(randomNum(0, _width), randomNum(0, _height));
          ctx.lineTo(randomNum(0, _width), randomNum(0, _height));
          ctx.stroke();
        }
        for(var i = 0; i < _num * 10; i++) {
          ctx.fillStyle = randomColor(0, 255);
          ctx.beginPath();
          //随机画原，填充颜色
          ctx.arc(randomNum(0, _width), randomNum(0, _height), 1, 0, 2 * Math.PI);
          ctx.fill();
        }
        return _picTxt; //返回随机数字符串
      }
      drawPic();
    </script>
  </body>

</html>